<template>
 <div class="FlexWrap-Box">
   <div class="FlexWrap-Title">
     <span>FlexWrap</span> 
     <select @change="getIndex">
          <option v-for="(itme,index) in value" :key="index" :value="itme.value" >{{itme.value+"/"+ itme.Title}}</option>
        </select>
   </div>
   <div class="FlexWrapContent" :style="valueClass">
     <div class="Chid">F</div>
     <div class="Chid">l</div>
     <div class="Chid">e</div>
     <div class="Chid">x</div>
     <div class="Chid">W</div>
     <div class="Chid">r</div>
     <div class="Chid">a</div>
     <div class="Chid">p</div>
  
   </div>
   <div class="FlexWrapContentTitle">{{FlexWrapContentTitle}}</div>
 </div>
</template>
<script>
         
export default {
  data(){ 

   return {

    value:[
      {value:'wrap',Title:'从上向下换行'},//从上向下换行
      {value:'nowrap',Title:'强制在一行'},//强制在一行
      {value:'wrap-reverse',Title:'从下向上换行'}//：从下向上换行
    ],
    valueClass:'',
    FlexWrapContentTitle:""
   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 

  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.click(this.key)

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){

 

 

 },
 getIndex(index){

   this.valueClass = "flex-wrap:" +index.target.value +";";

   
 }

  }

}

</script>

<style lang='scss'  scope>
   .FlexWrap-Box {
     flex: 1;
     background-color: orangered;
     display: flex;
     flex-direction: column;
  
   }
   .FlexWrap-Title {
     width: 100%;
     height: 30px;
     line-height: 30px;
     display: flex;
     justify-content: space-between;
     background-color: darkblue;
     color: white;
  
    
   }
   .FlexWrapContent {
     flex: 1;
     background-color: darkorange;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .FlexWrapContent>.Chid {
     width: 50px;
     height: 50px;
     line-height: 50px;
     text-align: center;
     color:white;
   }
   .FlexWrapContentTitle {
     width: 100%;
     height: 30px;
     line-height: 30px;
     text-align: center;
     color: white;
   }
</style>